<!DOCTYPE html>
<html lang="zh">
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('文件上传')"/>
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
    <input type="hidden" id="url" value=""/>
     <div class="row">
         <div class="col-sm-12">
             <div class="form-group">
                <label class="col-sm-3 control-label">图标地址：</label>
                <div class="col-sm-8">
                    <input type="hidden" id="linkHeaderUrl" class="form-control" name="headerImg" required="" value="">

                    <div  id="divPreview" style="width: 200px;height: 200px;border:1px solid #ecdddd;">
                        <img alt=""  id="imgHeadPhoto" src="/img/blog-default.png" style="width: 200px;height: 200px;">
                        <!--  点击显示大图片 -->
                        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
                            <div id="innerdiv" style="position:absolute;">
                                <div align="right">
                                    <img src="" style="width: 230px;height: 230px;">
                                </div>
                                <img id="bigimg" style="border:5px solid #fff;" src=""/>
                            </div>
                        </div>
                    </div>
                    <span id="fileSpanId">
                        <input type="file" id="multifile" name="attachment"  class="btn" style=""/>
                    </span>
                </div>
            </div>
         </div>
     </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/king/preview_image.js}"></script>
<script th:inline="javascript">
	var _files=new Array();
	
	$(document).ready(function() {
	    $("#multifile").bind('change', onQueryFile);
	});
	
	//选择文件后
	function onQueryFile(){
	    var fileName = this.files[0].name;
	    var prefix = fileName.substring(fileName.lastIndexOf('.')+1,fileName.length);
	    $("#fileName").val(this.files[0].name);
	    _files=new Array();
	    _files.push(this.files[0]);
	
	    prefix= prefix.toUpperCase();
	    if(prefix=='JPG'||prefix=='JPEG'||prefix=='PNG'||prefix=='BMP'){
	        //$("#fileName").val(this.files[0].name);
	        PreviewImage(this,'imgHeadPhoto','divPreview');
	        uploadFile();
	    }else{
	        $("#fileSpanId").html('<input type="file" id="multifile" name="attachment"  class="btn" style=""/>');
	        $("#multifile").bind('change', onQueryFile);
	        $.modal.alertWarning("请上传jpg、jpep、png、bmp文件格式的图片");
	    }
	}
	
	//点击浏览
	function onfindfileFile(){
	    $("#multifile").click();
	}

	function uploadFile(){
		 var formData = new FormData();
         //附件
         $.each(_files, function(i, file) {
             formData.append("file", file,file.name);
         });
         $.ajax( {
             url : "/file/image/uploadWithSize?width=[[${width}]]&height=[[${width}]]",
             data: formData,
             type: 'POST',
             cache: false,contentType: false,processData: false,
             beforeSend: function () {
                 $.modal.loading("正在处理中，请稍后...");
             },
             success : function(result) {
            	 if(result.code==200){
                	 $.modal.msgSuccess(result.msg)
                	 var _method=[[${callBackMethod}]];
    				 if(_method){
    		        	eval(_method+"(result.path)"); 
    				 }	
                     var index = parent.layer.getFrameIndex(window.name);
                     parent.layer.close(index);
                 }else{
                	 $.modal.alertWarning(result.msg)           	 
                 }
             },
             error: function(data){
                 $.modal.alertError("保存失败，HTTP错误。");
             }
         });
	}
</script>
</body>
</html>
